<template>
    <header class="header">
        <h1>todos</h1>
        <input
            class="new-todo"
            placeholder="What needs to be done?"
            @keyup.enter="addTodo"
            v-model="addInput"
        />
    </header>
</template>
<script lang="ts" setup>
import { useMainStore, todoRow } from '../store/index'
import axios from 'axios'
import { ref } from 'vue';


var addInput = ref('')
var addTodo = async () => {
    //拼接对象内容
    const addTodoObj: todoRow = {
        id: 0,
        title: '',
        status: false,
    }
    const todoStore = useMainStore()
    var todoArr = todoStore.todoList
    var arrTag = todoArr.length - 1
    addTodoObj.id = todoArr[arrTag].id + 1
    addTodoObj.title = addInput.value
    // console.log(addTodoObj);
    var { data, status } = await axios.post('http://127.0.0.1:8000/todoList', addTodoObj)
    if (data && status == 201) {
        todoStore.pushTodo(data)
        //清空输入框的内容
        addInput.value = ''
    }
}
</script>

<style></style>